<template>
  <view class="menu-item" @click="handleClick">
    <view class="menu-left">
      <text class="menu-icon">{{ item.icon }}</text>
      <text class="menu-name">{{ item.name }}</text>
    </view>
    <view class="menu-right">
      <text class="menu-arrow">></text>
    </view>
  </view>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click', props.item.action)
}
</script>

<style scoped>
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 30rpx;
  margin-bottom: 2rpx;
}
.menu-left {
  display: flex;
  align-items: center;
}
.menu-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}
.menu-name {
  font-size: 28rpx;
  color: #333;
}
.menu-right {
  color: #999;
}
.menu-arrow {
  font-size: 24rpx;
}
</style>
